<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 2D转换</title>
	<style>
		html, body {
			height: 100%;
		}

		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

		section {
			height: 100%;
			background-color: #2AB561;
		}
		
		.shield {
			width: 440px;
			margin: 0 auto;
		}

		.shield img {
			transition: all 1s linear;
		}

		img:nth-child(1) {
			transform: translate(100px, 120px) rotate(30deg);
		}

		img:nth-child(2) {
			transform: translate(-100px, 10px) rotate(20deg);
		}

		img:nth-child(3) {
			transform: translate(60px, 20px) rotate(-30deg);
		}

		img:nth-child(4) {
			transform: translate(15px, 120px) rotate(90deg);
		}

		.shield:hover img {
			transform: translate(0, 0) rotate(0);
		}
	</style>
</head>
<body>
	<section>
		<div class="shield">
			<img src="./images/shield_1_01.png" alt="">
			<img src="./images/shield_1_02.png" alt="">
			<img src="./images/shield_1_03.png" alt="">
			<img src="./images/shield_1_04.png" alt="">
			<img src="./images/shield_1_05.png" alt="">
			<img src="./images/shield_1_06.png" alt="">
			<img src="./images/shield_1_07.png" alt="">
			<img src="./images/shield_1_08.png" alt="">
			<img src="./images/shield_1_09.png" alt="">
		</div>	
	</section>
</body>
</html>